<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      v-horizontal-scroll="'always'"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        label="操作"
        align="center"
        width="80"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row, $index }">
          <el-button
            type="primary"
            size="mini"
            @click="handleUpdate(row, $index)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="ID" prop="id" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分析项目" width="200px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.fxxm }}</span>
        </template>
      </el-table-column>
      <el-table-column label="顾客性格图谱" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.gkxgtp }}</span>
        </template>
      </el-table-column>
      <el-table-column label="【破冰】建立信任" width="200px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.jlxr }}</span>
        </template>
      </el-table-column>
      <el-table-column label="成交策略" width="300px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.cjcl }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客情方案" width="350px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.kqfa }}</span>
        </template>
      </el-table-column>
      <el-table-column label="A 顾客好的一面" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.gkhdym }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="B 顾客的人道问题（综合）"
        width="150px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.rdwtZh }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="B 顾客的人道问题（财富）"
        width="250px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.rdwtCf }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="B 顾客的人道问题（感情）"
        width="150px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.rdwtGq }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="B 顾客的人道问题（健康）"
        width="150px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.rdwtJk }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="B 顾客的人道问题（性格）"
        width="250px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.rdwtXg }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="B 顾客的人道问题（运）"
        width="250px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.rdwtY }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="B 顾客的人道问题（子女）"
        width="150px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.rdwtZn }}</span>
        </template>
      </el-table-column>
      <el-table-column label="C 面相优点" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.mxYd }}</span>
        </template>
      </el-table-column>
      <el-table-column label="D 面相缺点" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.mxQd }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="人道建议或设计方案-避短"
        width="250px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.rdjyBd }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="人道建议或设计方案-扬长"
        width="150px"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row.rdjyYc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="国潮明眉纹绣方案" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.gcMm }}</span>
        </template>
      </el-table-column>
      <el-table-column label="国潮眸眼纹绣方案" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.gcMy }}</span>
        </template>
      </el-table-column>
      <el-table-column label="国潮善唇纹绣方案" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.gcSc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="国潮睐甲方案" width="250px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.gcLj }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" width="155px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.updateTime }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="编辑"
      :visible.sync="dialogFormVisible"
      style="width: 2500px; margin-left: -250px; margin-top: -100px"
    >
      <el-form
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="190px"
        style="width: 1000px; margin-left: 50px"
      >
        <el-form-item label="分析项目">
          <el-input
            v-model="temp.fxxm"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="顾客性格图谱">
          <el-input
            v-model="temp.gkxgtp"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="【破冰】建立信任">
          <el-input
            v-model="temp.jlxr"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="成交策略">
          <el-input
            v-model="temp.cjcl"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="客情方案">
          <el-input
            v-model="temp.kqfa"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="A 顾客好的一面">
          <el-input
            v-model="temp.gkhdym"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="B 顾客的人道问题（综合）">
          <el-input
            v-model="temp.rdwtZh"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="B 顾客的人道问题（财富）">
          <el-input
            v-model="temp.rdwtCf"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="B 顾客的人道问题（感情）">
          <el-input
            v-model="temp.rdwtGq"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="B 顾客的人道问题（健康）">
          <el-input
            v-model="temp.rdwtJk"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="B 顾客的人道问题（性格）">
          <el-input
            v-model="temp.rdwtXg"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="B 顾客的人道问题（运）">
          <el-input
            v-model="temp.rdwtY"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="B 顾客的人道问题（子女）">
          <el-input
            v-model="temp.rdwtZn"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="C 面相优点">
          <el-input
            v-model="temp.mxYd"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="D 面相缺点">
          <el-input
            v-model="temp.mxQd"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="人道建议或设计方案-避短">
          <el-input
            v-model="temp.rdjyBd"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="人道建议或设计方案-扬长">
          <el-input
            v-model="temp.rdjyYc"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="国潮明眉纹绣方案">
          <el-input
            v-model="temp.gcMm"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="国潮眸眼纹绣方案">
          <el-input
            v-model="temp.gcMy"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="国潮善唇纹绣方案">
          <el-input
            v-model="temp.gcSc"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="国潮睐甲方案">
          <el-input
            v-model="temp.gcLj"
            :autosize="{ minRows: 1, maxRows: 6 }"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="updateData()"> 确定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import horizontalScroll from 'el-table-horizontal-scroll'
import { getBaseInfo, putBaseInfo } from '@/api/base'
import dayjs from 'dayjs'

Vue.use(horizontalScroll)

export default {
  data () {
    return {
      dialogFormVisible: false,
      list: null,
      listLoading: true,
      temp: {
        id: undefined,
        fxxm: '',
        gkxgtp: '',
        jlxr: '',
        cjcl: '',
        kqfa: '',
        gkhdym: '',
        rdwtZh: '',
        rdwtCf: '',
        rdwtGq: '',
        rdwtJk: '',
        rdwtXg: '',
        rdwtY: '',
        rdwtZn: '',
        mxYd: '',
        mxQd: '',
        rdjyBd: '',
        rdjyYc: '',
        gcMm: '',
        gcMy: '',
        gcSc: '',
        gcLj: '',
        updateTime: new Date()
      }
    }
  },
  created () {
    // console.log(this.$route.path)
    this.fetchData()
    // console.log(dayjs().format('YYYY-MM-DD hh:mm:ss'))
  },
  methods: {
    fetchData () {
      const str = this.$route.path
      this.listLoading = true
      getBaseInfo(str.charAt(str.length - 1)).then(response => {
        this.list = response.data.data
        // console.log(this.list)
        this.listLoading = false
      })
    },
    handleUpdate (row, index) {
      // console.log(row)
      // console.log(index)
      this.dialogFormVisible = true
      this.temp = Object.assign({}, row) // copy obj
      // this.temp.timestamp = new Date(this.temp.timestamp)
      // this.dialogStatus = 'update'
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].clearValidate()
      // })
    },
    updateData () {
      // this.temp.updateTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
      this.temp.updateTime = undefined
      const tempData = Object.assign({}, this.temp)
      putBaseInfo(tempData).then(() => {
        const index = this.list.findIndex(v => v.id === this.temp.id)
        this.list.splice(index, 1, this.temp)
        this.dialogFormVisible = false
        this.$notify({
          title: 'Success',
          message: 'Update Successfully',
          type: 'success',
          duration: 2000
        })
      })
    }
  }
}
</script>
